<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>主题切换</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" />
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <div id="theme-open">
        <span><i class="fa fa-bars"></i></span>
    </div>
    <div class="theme-container">
        <span id="theme-close"><i class="fa fa-times"></i></span>
        <h3>
            主题切换
        </h3>
        <div class="theme-toggle">
            <span>白天</span>
            <span class="toggle"></span>
            <span>夜晚</span>
        </div>
        <h3>
            选择颜色
        </h3>
        <div class="theme-colors">
            <div class="color" style="background:#2980b9"></div>
            <div class="color" style="background:#27ae60"></div>
            <div class="color" style="background:#ffa502"></div>
            <div class="color" style="background:#8e44ad"></div>
            <div class="color" style="background:#0fb9b1"></div>
            <div class="color" style="background:#ffd32a"></div>
            <div class="color" style="background:#ff0033"></div>
            <div class="color" style="background:#e84393"></div>
        </div>
    </div>

    <div class="container">
        <div class="content">
            <img src="img/kitten.jpg" alt="">
            <h3>我的小可爱</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo eos minima neque praesentium accusamus expedita quae optio dolorem fugiat facere. Mollitia quisquam deserunt officiis ad voluptatem quo, iusto dolor quos.</p>
            <a href="#" class="btn">read more</a>
        </div>
    </div>
</body>

<script>
    let toggle = document.querySelector('.theme-toggle');
    toggle.onclick = () => {
        toggle.classList.toggle('active');
        document.body.classList.toggle('active');
    }

    document.querySelectorAll('.theme-colors .color').forEach(color => {
        color.onclick = () => {
            let bg = color.style.background;
            document.querySelector(':root').style.setProperty('--main-color', bg);
        }
    })

    let theme = document.querySelector('.theme-container');

    document.querySelector('#theme-open').onclick = () => {
        theme.classList.add('active');
        document.body.style.paddingRight = '350px';
    }

    document.querySelector('#theme-close').onclick = () => {
        theme.classList.remove('active');
        document.body.style.paddingRight = '0px';
    }
</script></html>
